<template>
  <view class="login">

    <!-- 头-->
    <IndexHeader></IndexHeader>


    <!-- 标题 -->
    <view class="login_title">
      <h2>欢迎回来!</h2>
      <text>Please login to your accounts</text>
    </view>


    <!-- 表单-->
    <view class="form">
      <view class="form-item">
        <label for="">手机号</label>
        <input type="text" placeholder="手机号" v-model="loginForm.phone" />
      </view>
      <view class="form-item">
        <label for="">密码</label>
        <input v-model="loginForm.password" :password="!eye" placeholder="密码必须字母开头" />
        <uni-icons @click="eye=!eye" :type="eye?'eye':'eye-slash'" size="20" color="#b1afaf">
        </uni-icons>
      </view>



      <text class="forget clearfix" @click="findPwdHnadler">忘记密码?</text>
    </view>
    <!-- 按钮-->
    <view class="btn">
      <view class="login_btn" @click="loginHandler">
        登录
      </view>
      <view class="register_btn" @click="isRegister=true">
        注册
      </view>
    </view>

    <!-- 注册 -->
    <view class="RegisterToast" :class="isRegister?'show':''">
      <view class="header">
        <text class="header_title">注册</text>
        <uni-icons type="closeempty" size="20" @click="isRegister=false"></uni-icons>
      </view>
      <!-- 表单-->
      <view class="form">
        <view class="form-item">
          <label for="">手机</label>
          <input v-model="registerForm.phone" type="text" placeholder="11位手机号" />
        </view>
        <view class="form-item">
          <label for="">密码</label>
          <input v-model="registerForm.password" :password="!eye" placeholder="密码开头必须是字母" />
          <uni-icons @click="eye=!eye" :type="eye?'eye':'eye-slash'" size="20" color="#b1afaf">
          </uni-icons>
        </view>
        <view class="form-item">
          <label for="">昵称</label>
          <input v-model="registerForm.nickName" type="text" placeholder="昵称" />
        </view>
      </view>

      <!-- 注册 -->
      <view class="submit" @click="registerHandler">
        注册
      </view>
    </view>

    <!-- 遮罩层 -->
    <view v-show="isRegister" class="isRegister" @click="isRegister = false"></view>

  </view>
</template>

<script>
  import {
    req
  } from "../utils/request/request.js"
  import IndexHeader from "../../components/index_header/index_header.vue"
  import {
    validForm
  } from "../utils/validForm.js"

  import {
    mapActions
  } from 'vuex'
  import {
    uniToast
  } from "../utils/uni/uni.js"
  export default {
    components: {
      IndexHeader
    },
    data() {
      return {
        eye: false,
        isRegister: false,
        registerForm: {
          nickName: "",
          password: "",
          phone: ""
        },
        loginForm: {
          phone: "15818854192",
          password: "qwe123"
        }

      };
    },
    methods: {
      ...mapActions("user", ['login']),
      /* 登录*/
      loginHandler() {
        let o = {
          phone: {
            value: this.loginForm.phone,
            errorMsg: '手机号格式不正确',
            reg: /^1[3-9]\d{9}$/
          },
          password: {
            value: this.loginForm.password,
            errorMsg: '密码由数字字母下划线组合(6-16字符)',
            reg: /^[A-Za-z]\w{5,15}$/
          }
        };
        let isPass = validForm.valid(o);
        if (!isPass) return
        this.login(this.loginForm)
      },
      /* 注册*/
      registerHandler() {
        let o = {
          phone: {
            value: this.registerForm.phone,
            errorMsg: '手机号格式不正确',
            reg: /^1[3-9]\d{9}$/
          },
          password: {
            value: this.registerForm.password,
            errorMsg: '密码由数字字母下划线组合(6-16字符)',
            reg: /^[A-Za-z]\w{5,15}$/
          },
          nickName: {
            value: this.registerForm.nickName,
            errorMsg: '昵称由字母数字下划线汉字组合(1-10字符)',
            reg: /^[\w\u4e00-\u9fa5]{1,10}$/
          },
        };
        let isPass = validForm.valid(o);
        if (!isPass) return
        req('register', {
          reqData: this.registerForm,
          method: 'POST'
        }).then(res => {
          if (res['data']['code'] === 100) {
            uniToast(res['data']['msg'])
            this.isRegister = false
          } else {
            uniToast(res['data']['msg'], "error")
          }
        }, err => {
          console.log(err);
        }).finally(() => {
          for (let key in this.registerForm) {
            this.$set(this.registerForm, key, "")
          }
        })
      },
      findPwdHnadler() {
        uni.navigateTo({
          url: '/pages/login/user/retrieve_password/retrieve_password'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    position: relative;
    overflow: hidden;
  }

  .login {
    overflow: hidden;
    position: relative;
    height: 100vh;

    .isRegister {
      position: absolute;
      background-color: #0000008c;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
    }


    .login_title {
      color: #808080;
      padding: 0 20rpx;

      text {
        font-size: 28rpx;
        margin: 50rpx 0;
        display: block;
      }
    }

    .form {
      padding: 0 50rpx;

      font-size: 24rpx;

      .form-item {
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: #ddd solid 2rpx;

        input {
          font-size: 24rpx;
          flex: 1;
          outline: none !important;
          border: 0 !important;
        }

        label {
          width: 150rpx;
        }
      }

      .forget {
        float: right;
        margin-top: 40rpx;
        color: #808080;

        &.clearfix:after {
          content: "";
          /*设置内容为空*/
          clear: both;
          /*清除浮动*/
          display: block;
          /*将文本转为块级元素*/
          height: 0;
          /*高度为0*/
          visibility: hidden;
          /*将元素隐藏*/
        }

        &.clearfix {
          zoom: 1;
          /*为了兼容IE*/
        }
      }



    }

    .btn {
      font-size: 24rpx;
      color: #fff;
      padding: 0 50rpx;
      margin-top: 200rpx;

      .login_btn,
      .register_btn {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0c34ba;
        border-radius: 50rpx;
        margin-top: 100rpx;
      }

      .register_btn {
        background-color: #fff;
        color: #333;
        border: #ddd 2rpx solid;
      }
    }




    .RegisterToast {
      background-color: #fff;
      padding: 30rpx;
      font-size: 28rpx;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -100%;
      z-index: 1;
      transition: all .3s linear;

      &.show {
        bottom: 0;
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 80rpx;

        .header_title {
          font-weight: bold;
          font-size: 38rpx;
          color: #808080;
        }
      }

      .form {
        .form-item {
          display: flex;
          height: 80rpx;
          align-items: center;
          padding: 0 40rpx;

          input {
            flex: 1;
            font-size: 24rpx;
          }

          label {
            font-size: 24rpx;
            width: 150rpx;
          }
        }
      }

      .submit {
        background-color: #0c34ba;
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70rpx;
        margin: 0 30rpx;
        margin-top: 80rpx;
        font-size: 24rpx;
      }
    }



  }
</style>
